<template>
  <h1>双向绑定指令</h1>
<!--  双向绑定：将info变量与页面的元素进行绑定，效果：
      1）info变量的数据会绑定在html元素上进行显示
      2）html元素发生改变，info的值也会随着改变-->
  <input type="text" v-model="info">
  {{ info }}
  <p>{{ info }}</p>

  <input type="text" placeholder="请输入用户名" v-model="user.name">
  <input type="password" placeholder="请输入密码" v-model="user.pwd">
  男<input type="radio" name="gender" value="1" v-model="user.gender">
  女<input type="radio" name="gender" value="0" v-model="user.gender">
  <button @click="f">登录</button>
</template>

<script setup>
import {ref} from "vue";

const info = ref('测试数据');

const user = ref({name:'露丝',pwd:'123',gender:'0'});
const f = () => {
  console.log(user.value);
  console.log(user.value.name)
}
</script>

<style scoped>

</style>